@mixin config {
  @media (prefers-color-scheme: dark) {
    :root {
      --x-fg: hsl(0, 0%, 80%);
      --x-bg: hsl(0, 0%, 0%);

      --x-app-border-color: var(--x-bg);
      --x-app-bg: hsl(0, 0%, 13%);

      // star me
      --x-star-me-fg: var(--x-fg);
      --x-star-me-bg: var(--x-bg);
      --x-star-me-hover-fg: hsl(0, 0%, 100%);
      --x-star-me-hover-bg: var(--x-bg);
      --x-star-me-border-color: linear-gradient(90deg, transparent, hsl(0, 0%, 100%), transparent);
      // alert
      --x-status-ok-fg: hsl(0, 0%, 100%);
      --x-status-ok-bg: linear-gradient(hsl(120, 100%, 20%), hsl(120, 100%, 25%));
      --x-status-error-fg: hsl(0, 0%, 100%);
      --x-status-error-bg: linear-gradient(hsl(0, 0%, 27%), hsl(0, 0%, 33%));
      // progress

      // network node
      --x-network-node-fg: var(--x-fg);
      --x-network-node-bg: hsla(0, 0%, 100%, 0.05);
      --x-network-node-border-color: var(--x-card-split-color);
      --x-network-node-row-bg: var(--x-card-bg-hover);
      // ping

      // sys load
      // toast
    }
  }
}
